<head>
    <link rel="stylesheet" href="/css/layui/css/layui.css">
    <script src="/css/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<div style="margin-bottom: 5px">
        <span class="layui-breadcrumb">
              <a href="">首页</a>
              <a><cite>分类管理</cite></a>
        </span>
</div>
<div class="layui-inline">
    <input type="text" id="cate_name" placeholder="请输入分类名" class="layui-input">
</div>
<div class="layui-inline">
    <button type="button" id="submit" class="btn btn-primary">新增分类</button>
</div>
<table class="layui-table">
    <thead>
    <tr>
        <th>编号</th>
        <th>分类名</th>
        <th>创建时间</th>
        <th>修改时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <?php foreach($list as $v): ?>
    <tr>
        <td><?=$v['Cate']['id']?></td>
        <td><?=$v['Cate']['cate_name']?></td>
        <td><?= date('Y-m-d H:i:s',$v['Cate']['create_time'])?></td>
        <td><?=date('Y-m-d H:i:s',$v['Cate']['update_time'])?></td>
        <td>
            <a data-toggle="modal" data-target="#myModal" class="layui-icon layui-icon-edit"
               onclick="edit(<?= $v['Cate']['id']; ?>,'<?= $v['Cate']['cate_name'];?>')"></a>
            <a class="layui-icon layui-icon-subtraction" onclick="del(<?= $v['Cate']['id'];?>)"></a>
        </td>
    </tr>
    <?php endforeach; ?>
    </tbody>
</table>

<?php if($pageCount > 1): ?>
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li
        <?php if($page == 1 || !$page): ?> class="disabled" <?php endif; ?> >
        <a <?php if($page == 1 || !$page): ?>  onclick="return false" <?php endif; ?>
        href="/cate/index?page=<?= $page-1?>" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        </a>
        </li>
        <?php for($i=0;$i<$pageCount;$i++): ?>
        <li
        <?php if($page == $i+1): ?> class="active" <?php endif; ?>><a
            href="/cate/index?page=<?= $i+1 ?>"><?=$i+1?></a></li>
        <?php endfor; ?>
        <li
        <?php if($page == $pageCount): ?> class="disabled" <?php endif; ?> >
        <a <?php if($page == $pageCount): ?> onclick="return false" <?php endif; ?>
        href="/cate/index?page=<?= $page+1?>" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        </a>
        </li>
    </ul>
</nav>
<?php endif; ?>

<div class="modal fade" id="myModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">分类修改</h4>
            </div>
            <div class="modal-body">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类id</label>
                        <div class="layui-input-block">
                            <input type="text" id="id" disabled class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名</label>
                        <div class="layui-input-block">
                            <input type="text" id="cate_name1" placeholder="请输入分类名" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                <button type="button" id="ajax_submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>


<script>

    $('#submit').click(function () {
        var data = {
            'cate_name': $('#cate_name').val(),
        }
        $.ajax({
            'url': '/cate/add/',
            'data': data,
            'type': 'Post',
            'dataType': 'Json',
            'success': function (res) {
                layui.use(['layer'], function () {
                    var layer = layui.layer;
                    if (res.code == 200) {
                        layer.msg('新增成功！');
                    } else {
                        layer.msg(res.msg);
                    }
                    setTimeout(function () {
                        window.location.reload();
                    }, 800);
                })
            }
        });
    })


    function del(id) {
        var url = '/cate/del/';
        var data = {
            'id': id,
        }
        $.ajax({
            'url': url,
            'data': data,
            'type': 'Post',
            'dataType': 'Json',
            'success': function (res) {
                layui.use(['layer'], function () {
                    var layer = layui.layer;
                    if (res.code == 200) {
                        layer.msg('删除成功');
                    } else {
                        layer.msg('删除失败');
                    }
                    setTimeout(function () {
                        window.location.reload();
                    }, 800);
                })
            }
        });
    }

    function edit(id, cate_name) {
        $('#cate_name1').val(cate_name);
        $('#id').val(id);
    }

    $('#ajax_submit').click(function () {
        var data = {
            'id': $('#id').val(),
            'cate_name': $('#cate_name1').val(),
        }
        $.ajax({
            'url': '/cate/edit/',
            'data': data,
            'type': 'Post',
            'dataType': 'Json',
            'success': function (res) {
                layui.use(['layer'], function () {
                    var layer = layui.layer;
                    if (res.code == 200) {
                        layer.msg('修改成功');
                    } else {
                        layer.msg('修改失败');
                    }
                    setTimeout(function () {
                        window.location.reload();
                    }, 800);
                })
            }
        });
    });

</script>